<template>
	<view class="page">
		<view class="list">
			<view class="item" v-for="(item,index) of newsData" :key="index" @click="toDetails(item.id)">
				<!-- 无图 -->
				<view v-if="item.image.length==0">
					<view class="title">
						{{item.title}}
					</view>
					<view class="info">
						<view class="medium">
							{{item.medium}}
						</view>
						<view class="time">
							{{item.time}}
						</view>
					</view>
				</view>

				<!-- 单图 -->
				<view v-if="item.image.length==1" class="style1">
					<view class="title_info">
						<view class="title">{{item.title}}</view>
						<view class="info">
							<view class="medium">
								{{item.medium}}
							</view>
							<view class="time">
								{{item.time}}
							</view>
						</view>
					</view>
					<image :src="item.image[0]" mode="aspectFill"></image>
				</view>

				<!-- 多图 -->
				<view v-if="item.image.length>1" class="style2">
					<view class="title">{{item.title}}</view>
					<view class="images">
						<image :src="src" mode="aspectFill"
							v-for="(src,i) of item.image.slice(0,(item.image.length==2? 2 : 3))" :key="i"></image>
					</view>
					<view class="info">
						<view class="medium">
							{{item.medium}}
						</view>
						<view class="time">
							{{item.time}}
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				page: 0,
				limit: 10,
				newsData: [
					// {
					// 	"id": 3,
					// 	"title": "2024黑龙江“冷水鱼·冬捕季” 渔民穿冰下网、捕捞头鱼",
					// 	"medium": "央视网",
					// 	"time": "2024年12月28日 17:04",
					// 	"image": [
					// 		"https://p1.img.cctvpic.com/photoAlbum/photo/2024/12/28/PHOT9wlSZ3hU4dr1do9DqM1g241228_1000x2000.jpg",
					// 		"https://p4.img.cctvpic.com/photoAlbum/photo/2024/12/28/PHOTiIIyCEoMgCzBav0q55a1241228_1000x2000.jpg",
					// 		"https://p2.img.cctvpic.com/photoAlbum/photo/2024/12/28/PHOTue9WVYca9E8y9rAHpeKD241228_1000x2000.jpg"
					// 	]
					// }
				]
			}
		},

		onLoad() {
			this.getNewsData()
		},
		// 触底加载
		onReachBottom() {
			this.getNewsData()
		},
		// 刷新页面
		onPullDownRefresh() {
			this.page = 0
			this.getNewsData()
		},
		methods: {
			getNewsData() {
				uni.showLoading({
					title: "加载中..."
				})
				this.page++
				
				
				// request...
				// 在这里进行网络请求获取新闻列表数据
				// 对newsData进行赋值
				// this.newsData = [...this.newsData, ...res.data]



				uni.request({
					url: "https://fc-mp-55b3cd3b-8c2c-4c73-bad5-d78291945fa2.next.bspapp.com/news/getNewsList",
					success: ({
						data: res
					}) => {
						console.log(res)
						this.newsData = [...this.newsData, ...res.data]
					},
					complete: () => {
						uni.hideLoading()
						uni.stopPullDownRefresh()
					}
				})
			},
			toDetails(id){
				uni.navigateTo({
					url:"./details?id="+id
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.page {
		.list {
			.item {
				padding: 25rpx 40rpx;
				border-bottom: 1rpx solid #efeff3;

				.title {
					font-size: 34rpx;
					font-weight: 500;
					color: #000;
					line-height: 1.5;
					margin-bottom: 20rpx;
					text-align: justify;

					display: -webkit-box;
					-webkit-line-clamp: 2;
					-webkit-box-orient: vertical;
					overflow: hidden;
					text-overflow: ellipsis;

				}

				.info {
					line-height: 1.5;
					font-size: 22rpx;
					color: rgba(0, 0, 0, .7);
					display: flex;
					align-items: center;

					.medium {
						position: relative;
						margin-right: 28rpx;
					}

					.medium::after {
						content: "";
						width: 8rpx;
						height: 8rpx;
						border-radius: 50%;
						background-color: #c4c4c4;
						position: absolute;
						right: -18rpx;
						top: 50%;
						transform: translateY(-50%);
					}

					.time {}
				}

				image {
					border-radius: 16rpx;
					vertical-align: middle;
					background-color: rgba(196, 196, 196, .1);
				}

				.images {
					display: flex;
					align-items: center;
					justify-content: space-between;
					margin-bottom: 20rpx;

					image {
						margin-left: 10rpx;
					}

					image:nth-child(1) {
						margin-left: 0;
					}

				}

				.style1 {
					display: flex;
					justify-content: space-between;

					.title_info {
						flex: 1;
						padding-right: 30rpx;
						height: 180rpx;
						display: flex;
						flex-direction: column;
						justify-content: space-between;
					}

					image {
						width: 180rpx;
						height: 180rpx;
					}
				}

				.style2 {
					image {
						width: 50%;
						height: 180rpx;
					}
				}
			}
		}
	}
</style>